<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <form class="layui-form" action="" lay-filter="formExample">


            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red;">*</span>部门名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" lay-verify="required"  autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"></div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red;">*</span>部门编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="id" id="id" lay-verify="required"  autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"></div>
            </div>

            

            <div class="layui-form-item">
                <label class="layui-form-label">上级部门</label>
                <div class="layui-input-inline">
                    <input type="text" name="higherDepartment" id="higherDepartment_addDepartment" readonly  autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"></div>
            </div>

            <div class="layui-form-item" hidden>
                <label class="layui-form-label">上级部门ID</label>
                <div class="layui-input-inline">
                    <input type="text" name="higherDepartmentid" id="higherDepartmentid_addDepartment" readonly  autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"></div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">负责人</label>
                <div class="layui-input-inline">
                    <input type="text" name="leaders" id="leaders_addDepartment" readonly  autocomplete="off" class="layui-input" lay-filter="pp" ts-selected="">
                </div>
                <div class="layui-form-mid layui-word-aux"></div>
            </div>

            <div class="layui-form-item" hidden>
                <label class="layui-form-label">负责人ID</label>
                <div class="layui-input-inline">
                    <input type="text" name="leadersid" id="leadersid_addDepartment" readonly  autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"></div>
            </div>

          


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="demo1">确定</button>
                </div>
            </div>
        </form>



    </div>
</div>
<script>
    layui.use(['form', 'layedit', 'laydate','tree','tableSelect'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , tree = layui.tree
            , laydate = layui.laydate
            ,table = layui.table
            ,tableSelect = layui.tableSelect;


        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });



     

        //表单初始赋值
        /*data_userMgr是从userMgr页面传递过来的*/
        if (data_departmentMgr) {
            //id输入框不可用
            $("#id").attr("disabled","disabled");

            //赋值
            form.val('formExample', {
            "id":data_departmentMgr.departmentCode
            , "name": data_departmentMgr.departmentName
            , "higherDepartment":data_departmentMgr.pdepartmentName
            , "higherDepartmentid": data_departmentMgr.pdepartmentCode
            , "leaders": data_departmentMgr.leaderNames
            , "leadersid": data_departmentMgr.leaderIDs


            // , "interest": 1
            // , "like[write]": true //复选框选中状态
            // , "close": true //开关状态
            // , "sex": "女"
            // , "desc": "我爱 layui"
        })
            $("#leaders_addDepartment").attr("ts-selected",data_departmentMgr.leaderIDs.replace(new RegExp(";","gm"), ","))

        }
        
   //监听提交
   form.on('submit(demo1)', function (data) {
            if (data_departmentMgr){
                data.field["type"] = "edit"
            }else{
                data.field["type"] = "add"
            }
            shared.ajaxPost('/adminDepartmentInfo/addDepartment', data.field, function (res) {
            if (res) {
                layer.msg(res, {
                    icon: 1,
                time: 1000 //2秒关闭（如果不配置，默认是3秒）
                }, function(){
                    layer.closeAll();
                });
            }
        })
        return false;
    })
    


        $("#higherDepartment_addDepartment").on("click", function () {
        var content = layui.miniPage.getHrefContent('mypages/usual/departmentMgt/addDepartment_chooseDepartment.html');
        var openWH = layui.miniPage.getOpenWidthHeight();
        //不能用 var 前缀
        opreatType = "add";
        var index = layer.open({
            title: '选择上级部门',
            type: 1,
            shade: 0.2,
            // shade: [0.8, '#393D49'],//底层遮罩样式
            maxmin: true,
            shadeClose: true,
            offset: '100px',
            // area : [ 'auto', '448px' ],
            area : [ '500px', '500px' ],
            // area: [openWH[0] / 2 + 'px', openWH[1] / 2 - 30 + 'px'],
            // offset: [openWH[2] + 'px', openWH[3] + 'px'],
            content: content,
            end: function () {
                // tempList = []
                // var treeObj = $.fn.zTree.getZTreeObj("tree");
                // var nodes = treeObj.getNodes();
                //  rec(nodes);
                // console.log(tempList)
            }
        });
        $(window).on("resize", function () {
            layer.full(index);
        });
        return false;
    });


    tableSelect.render({
            elem: '#leaders_addDepartment',
            searchKey: 'user',
            checkedKey: 'id',
            checkedNameKey: 'name',//为修复插件功能,额外添加的参数
            searchPlaceholder: '输入用户名或ID',
            showSwitch:1,
            table: {
                url: config.server + "/adminPermission/getuser",
                cols: [[
                    { type: 'checkbox' },
                    { align: 'center', title: '序号', type: 'numbers', width: 50 },
                    { field: 'id', title: 'ID', width: 140 },
                    { field: 'name', title: '姓名', width: 140 },
                    { field: 'showDepartment', title: '部门', width: 140 }
                ]],
                limits:[6,10,20],
                headers: {
                    token: shared.getCookie('token'),
                },
                limit: 6
            },
            done: function (elem, data) {
                idList = []
                nameList = []
                for (let index = 0; index < data.data.length; index++) {
                    const element = data.data[index];
                    idList.push(element.id)
                    nameList.push(element.name)
                }
                elem.val(nameList.join(";"))
                $("#leadersid_addDepartment").val(idList.join(";"))
            }
        })


        form.on('checkbox()', function(data){
          //
          //   console.log("pp");
          //   console.log(data.elem.value);
          // console.log(data.elem); //得到checkbox原始DOM对象
          // console.log(data.elem.checked); //是否被选中，true或者false
          // console.log(data.value); //复选框value值，也可以通过data.elem.value得到
          // console.log(data.othis); //得到美化后的DOM对象
          //   console.log(data.showDepartment); //得到美化后的DOM对象
        });


    })

        
   


  
</script>